<template>
  <leftRightSplit :left-span="4">
    <el-card slot="left" header="流程应用分类">
      <treeDic v-model="queryParam.AppClassify" :dic-id="DictItemDic.flowType" @change="loadClassify" @load="loadDic" />
    </el-card>
    <el-card slot="right" :header="title">
      <div class="app-container">
        <el-form :inline="true" :model="queryParam">
          <el-form-item label="应用名称">
            <el-input
              v-model="queryParam.QueryKey"
              placeholder="应用名称"
              style="width: 200px"
              @change="search"
            />
          </el-form-item>
          <el-form-item label="应用类型">
            <enumItem
              v-model="queryParam.AppType"
              :dic-key="EnumDic.FlowAppType"
              placeholder="应用类型"
              sys-head="flow"
              @change="search"
            />
          </el-form-item>
          <el-form-item label="状态">
            <enumItem
              v-model="queryParam.Status"
              :dic-key="EnumDic.FlowAppStatus"
              placeholder="状态"
              :multiple="true"
              sys-head="flow"
              @change="search"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="default"
              @click="reset()"
            >重置</el-button>
            <el-button
              v-if="checkPower('flow.app.add')"
              type="success"
              @click="addFlow()"
            >添加应用</el-button>
          </el-form-item>
        </el-form>
      </div>
      <w-table
        :data="appList"
        :columns="columns"
        :is-paging="true"
        row-key="Id"
        :paging="paging"
        @load="load"
      >
        <template slot="appClassify" slot-scope="e">
          <span v-if="classify[e.row.AppClassify]"> {{ classify[e.row.AppClassify].text }}</span>
        </template>
        <template slot="appType" slot-scope="e">
          <span v-if="FlowAppType[e.row.AppType]"> {{ FlowAppType[e.row.AppType].text }}</span>
        </template>
        <template slot="flow" slot-scope="e">
          <span v-if="e.row.FlowId"> {{ e.row.FlowName + '('+e.row.FlowVer+')' }}</span>
        </template>
        <template slot="status" slot-scope="e">
          <el-switch
            :disabled="checkPower('flow.app.set') == false"
            :value="e.row.Status"
            :inactive-text="e.row.Status == 0 ? FlowAppStatus[0].text : FlowAppStatus[2].text"
            :inactive-value="2"
            active-text="启用"
            :active-value="1"
            @change="(val) => setStatus(e.row, val)"
          />
        </template>
        <template slot="appTime" slot-scope="e">
          <span v-if="e.row.AppTime"> {{ moment(e.row.AppTime).format('YYYY-MM-DD HH:mm') }}</span>
        </template>
        <template slot="action" slot-scope="e">
          <el-button
            v-if="checkPower('flow.app.set')"
            icon="el-icon-message"
            size="mini"
            title="编辑消息模版"
            type="info"
            circle
            @click="eidtAppMsg(e.row)"
          />
          <el-button
            v-if="e.row.AppType === 0 && checkPower('flow.app.set')"
            title="设置应用菜单"
            icon="el-icon-files"
            size="mini"
            type="primary"
            circle
            @click="editPower(e.row)"
          />
          <el-button
            v-if="e.row.AppType === 0 && e.row.FlowId != null && checkPower('flow.app.set')"
            title="应用归档表单配置"
            icon="el-icon-setting"
            size="mini"
            type="warning"
            circle
            @click="eidtForm(e.row)"
          />
          <el-button
            v-if="e.row.Status !== 1 && checkPower('flow.app.set')"
            title="编辑流程应用信息"
            icon="el-icon-edit"
            size="mini"
            type="primary"
            circle
            @click="edit(e.row)"
          />
          <el-button
            v-if="e.row.Status == 0 && checkPower('flow.app.delete')"
            size="mini"
            title="删除流程应用"
            icon="el-icon-delete"
            type="danger"
            circle
            @click="deleteFlow(e.row)"
          />
        </template>
      </w-table>
      <flowAppEdit :id="id" :app-classify="queryParam.FlowType" :visible="infoVisible" @close="closeEdit" />
      <flowAppMsg :id="id" :flow-id="flowId" :visible.sync="msgVisible" :app-name="appName" />
      <flowAppFormEdit :app-id="id" :visible.sync="formVisible" />
      <editAppPower :app-id="id" :app-name="appName" :visible.sync="powerVisible" />
    </el-card>
  </leftrightsplit>
</template>

<script>
import moment from 'moment'
import treeDic from '@/components/base/treeDic.vue'
import editAppPower from './components/editAppPower.vue'
import { DictItemDic, EnumDic, FlowAppType, FlowAppStatus } from '../../config/flowConfig'
import * as flowAppApi from '../../api/flowApp'
import flowAppEdit from './components/flowAppEdit.vue'
import flowAppMsg from './components/flowAppMsg.vue'
import flowAppFormEdit from './components/flowAppFormEdit.vue'
export default {
  components: {
    treeDic,
    flowAppEdit,
    flowAppMsg,
    flowAppFormEdit,
    editAppPower
  },
  data() {
    return {
      EnumDic,
      DictItemDic,
      FlowAppStatus,
      FlowAppType,
      appList: [],
      powerVisible: false,
      title: '全部应用',
      id: null,
      appName: null,
      flowId: null,
      infoVisible: false,
      msgVisible: false,
      formVisible: false,
      classify: {},
      queryParam: {
        Status: [],
        QueryKey: null,
        FlowType: null
      },
      columns: [
        {
          key: 'Id',
          title: '应用No',
          align: 'center',
          minWidth: 120
        },
        {
          key: 'AppName',
          title: '应用名称',
          align: 'left',
          minWidth: 250
        },
        {
          sortby: 'AppClassify',
          key: 'AppClassify',
          title: '应用分类',
          align: 'center',
          width: 120,
          slotName: 'appClassify',
          sortable: 'custom'
        },
        {
          sortby: 'AppType',
          key: 'AppType',
          title: '应用类型',
          align: 'center',
          width: 120,
          slotName: 'appType',
          sortable: 'custom'
        },
        {
          key: 'flow',
          title: '应用流程',
          align: 'center',
          slotName: 'flow',
          minWidth: 150
        },
        {
          key: 'Status',
          title: '应用状态',
          align: 'center',
          slotName: 'status',
          width: 150,
          sortable: 'custom'
        },
        {
          key: 'AppShow',
          title: '说明',
          align: 'left',
          minWidth: 150
        },
        {
          key: 'AppTime',
          title: '启用时间',
          align: 'center',
          slotName: 'appTime',
          sortable: 'custom',
          width: 150
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      rolePower: [
        'flow.app.set',
        'flow.app.add',
        'flow.app.delete'
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      }
    }
  },
  computed: {},
  mounted() {
    this.initPower()
  },
  methods: {
    moment,
    async initPower() {
      this.rolePower = await this.$checkPower(this.rolePower)
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    closeEdit(isRefresh) {
      this.infoVisible = false
      if (isRefresh) {
        this.reset()
      }
    },
    editPower(row) {
      this.id = row.Id
      this.appName = row.AppName
      this.powerVisible = true
    },
    eidtForm(row) {
      this.id = row.Id
      this.formVisible = true
    },
    eidtAppMsg(row) {
      this.id = row.Id
      this.flowId = row.FlowId
      this.appName = row.AppName
      this.msgVisible = true
    },
    addFlow() {
      this.id = null
      this.infoVisible = true
    },
    editFlow(row) {
      this.$router.replace({ name: 'flowNodeEdit', params: { id: row.Id }})
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.paging.Index = 1
      this.load()
    },
    loadDic(e) {
      this.classify = e.tree
      this.reset()
    },
    loadClassify(e) {
      if (this.queryParam.AppClassify == null) {
        this.title = '全部应用'
      } else {
        this.title = e.tree[this.queryParam.AppClassify].text + '类应用列表'
      }
      this.load()
    },
    search() {
      this.paging.Index = 1
      this.load()
    },
    async load() {
      const res = await flowAppApi.Query(this.queryParam, this.paging)
      if (res.List) {
        this.appList = res.List
      } else {
        this.appList = []
      }
      this.paging.Total = res.Count
    },
    async setStatus(row, value) {
      if (value === 1) {
        await flowAppApi.Enable(row.Id)
      } else {
        await flowAppApi.Stop(row.Id)
      }
      // eslint-disable-next-line require-atomic-updates
      row.Status = value
    },
    edit(row) {
      this.id = row.Id
      this.infoVisible = true
    },
    deleteFlow(row) {
      const title =
        '确认删除应用:' + row.AppName + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await flowAppApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    }
  }
}
</script>
